<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* section + section {
        color: red;
      } */
      div ~ section {
        color: red;
      }
    </style>
  </head>
  <body>
    <div>这是div元素</div>
    <header>
      <section>这是header里面的section元素</section>
    </header>
    <section>这是第一个section元素</section>
    <section>这是第二个section元素</section>
    <section>这是第三个section元素</section>
    <section>这是第四个section元素</section>
  </body>
</html>

<!-- 
  1. 相邻兄弟选择器

    语法
      选择器1+选择器2 {
        申明
      }

    改变的是选择器1后面紧挨着的选择器2的样式

  2. 通用兄弟选择器
      
    语法
      选择器1~选择器2 {
        申明
      }
 -->
